﻿<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"
         Language="C#"
         MasterPageFile="~masterurl/default.master" %>

<%@ Register Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"
             Namespace="Microsoft.SharePoint.WebControls"
             TagPrefix="wss" %>
<%@ Register src="/_controltemplates/15/InputFormControl.ascx"
             TagName="InputFormControl"
             TagPrefix="wssuc" %>

<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <wss:ScriptLink name="SP.Runtime.js" OnDemand="true" runat="server" />
    <wss:ScriptLink name="SP.js" OnDemand="true" runat="server" />
    <wss:ScriptLink name="SP.UI.Dialog.js" OnDemand="true" runat="server" />

    <script type="text/javascript" src="../../Common/Scripts/jquery.js"></script>
    <script type="text/javascript" src="../../Common/Scripts/jquery.imagemapster.js"></script>
    <script type="text/javascript" src="../../Common/Scripts/jquery-ui.js"></script>
    <script type="text/javascript" src="../Scripts/jquery.ui.mapAreaGenerator.js"></script>
    <script type="text/javascript" src="../Scripts/Dev4U.SP.UI.SpriteViewer.js"></script>

    <link rel="Stylesheet" type="text/css" href="../../Common/Content/jquery-ui/jquery-ui.css" />
    <link rel="Stylesheet" type="text/css" href="../Content/SpriteViewer.css" />
</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <div class="dev4u-tabs" id="imageTabs" style="display: none;">
        <ul>
            <li><a href="#formatmap16x16">formatmap16x16.png</a></li>
            <li><a href="#formatmap32x32">formatmap32x32.png</a></li>
            <li style="display: none"><a href="#ewais">ewais.png</a></li>
        </ul>
        <div class="dev4u-tabs-content">
            <div class="dev4u-sp-version-settings ui-tabs-panel">
                <input id="sp2010" name="spVersion" type="radio" /><label for="sp2010">SharePoint 2010</label>
                <br />
                <table border="0" cellpadding="0" cellspacing="0">
                    <wssuc:InputFormControl LabelText="Image:" runat="server">
                        <Template_Control>
                            <span class="ms-cui-ctl-largeIconContainer">
                                <span class="ms-cui-img-32by32 ms-cui-img-cont-float" style="display: none">
                                    <img alt="" src="about:blank" />
                                </span>
                            </span>
                        </Template_Control>
                    </wssuc:InputFormControl>
                    <wssuc:InputFormControl LabelText="Left:" runat="server">
                        <Template_Control>
                            <wss:InputFormTextBox Columns="5" CssClass="ms-input" ID="Image2010LeftControl" MaxLength="5" runat="server" />
                            <wss:InputFormRangeValidator ControlToValidate="Image2010LeftControl" ErrorMessage="The value must be an integer between -1000 and 0." MaximumValue="0" MinimumValue="-1000" runat="server" Type="Integer" />
                        </Template_Control>
                    </wssuc:InputFormControl>
                    <wssuc:InputFormControl LabelText="Top:" runat="server">
                        <Template_Control>
                            <wss:InputFormTextBox Columns="5" CssClass="ms-input" ID="Image2010TopControl" MaxLength="5" runat="server" />
                            <a class="dev4u-button-find" href="javascript:" style="float: right;">
                                <img alt="Find" src="/_layouts/15/images/FIND.GIF" />
                            </a>
                            <wss:InputFormRangeValidator ControlToValidate="Image2010TopControl" ErrorMessage="The value must be an integer between -1000 and 0." MaximumValue="0" MinimumValue="-1000" runat="server" Type="Integer" />
                        </Template_Control>
                    </wssuc:InputFormControl>
                    <wssuc:InputFormControl LabelText="Attributes:" runat="server">
                        <Template_Control>
                            <textarea class="dev4u-sp-version-settings-attributes ms-input" cols="10" rows="12"></textarea>
                        </Template_Control>
                    </wssuc:InputFormControl>
                </table>
            </div>
            <div class="dev4u-image-tab" id="formatmap16x16">
                <div class="dev4u-image-container">
                    <img alt="" src="/_layouts/1033/images/formatmap16x16.png?rev=23" />
                </div>
                <div class="dev4u-image-container">
                    <img alt="" src="/_layouts/15/1033/images/formatmap16x16.png?rev=23" />
                </div>
            </div>
            <div class="dev4u-image-tab" id="formatmap32x32">
                <div class="dev4u-image-container">
                    <img alt="" class="dev4u-image" src="/_layouts/1033/images/formatmap32x32.png" />
                </div>
                <div class="dev4u-image-container">
                    <img alt="" class="dev4u-image" src="/_layouts/15/1033/images/formatmap32x32.png?rev=23" />
                </div>
            </div>
            <div class="dev4u-image-tab" id="ewais">
                <div class="dev4u-image-container">
                    <img alt="" class="dev4u-image" src="/_layouts/1033/images/ewais.png?rev=23" />
                </div>
                <div class="dev4u-image-container">
                    <img alt="" class="dev4u-image" src="/_layouts/15/1033/images/ewais.png?rev=23" />
                </div>
            </div>
            <div class="dev4u-sp-version-settings ui-tabs-panel">
                <input id="sp2013" name="spVersion" type="radio" checked="checked" /><label for="sp2013">SharePoint 2013</label>
                <br />
                <table border="0" cellpadding="0" cellspacing="0">
                    <wssuc:InputFormControl LabelText="Image:" runat="server">
                        <Template_Control>
                            <span class="ms-cui-ctl-largeIconContainer">
                                <span class="ms-cui-img-32by32 ms-cui-img-cont-float" style="display: none">
                                    <img alt="" src="about:blank" />
                                </span>
                            </span>
                        </Template_Control>
                    </wssuc:InputFormControl>
                    <wssuc:InputFormControl LabelText="Left:" runat="server">
                        <Template_Control>
                            <wss:InputFormTextBox Columns="5" CssClass="ms-input" ID="Image2013LeftControl" MaxLength="5" runat="server" />
                            <wss:InputFormRangeValidator ControlToValidate="Image2013LeftControl" ErrorMessage="The value must be an integer between -1000 and 0." MaximumValue="0" MinimumValue="-1000" runat="server" Type="Integer" />
                        </Template_Control>
                    </wssuc:InputFormControl>
                    <wssuc:InputFormControl LabelText="Top:" runat="server">
                        <Template_Control>
                            <wss:InputFormTextBox Columns="5" CssClass="ms-input" ID="Image2013TopControl" MaxLength="5" runat="server" />
                            <a class="dev4u-button-find" href="javascript:" style="float: right;">
                                <img alt="find" src="/_layouts/15/images/FIND.GIF" />
                            </a>
                            <wss:InputFormRangeValidator ControlToValidate="Image2013TopControl" ErrorMessage="The value must be an integer between -1000 and 0." MaximumValue="0" MinimumValue="-1000" runat="server" Type="Integer" />
                        </Template_Control>
                    </wssuc:InputFormControl>
                    <wssuc:InputFormControl LabelText="Attributes:" runat="server">
                        <Template_Control>
                            <textarea class="dev4u-sp-version-settings-attributes ms-input" cols="10" rows="12"></textarea>
                        </Template_Control>
                    </wssuc:InputFormControl>
                </table>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        (function () {
            var spVersionByControlIndex = ['2010', '2013'];

            function getActiveTab() {
                var index = $('#imageTabs').tabs('option', 'active');
                return $('#imageTabs').find(".dev4u-image-tab").eq(index);
            }
            function getImageBySPVersion(imageTab, spVersion) {
                return imageTab.find('.dev4u-image-container').eq($.inArray(spVersion, spVersionByControlIndex)).find('img').last();
            }
            function getImageName(image) {
                return image.closest('.dev4u-image-tab').attr('id');
            }
            function getSPVersion(versionSettingsContainer) {
                return versionSettingsContainer.find('input[name="spVersion"]').attr('id').replace('sp', '');
            }
            function initialize() {
                function toAttributes(spVersion, commandId) {
                    var coordinatesArray = Dev4U.SP.UI.SpriteViewer.mappings.getCommandFullCoordinates(spVersion, commandId);
                    var resultString = '';
                    if (coordinatesArray) {
                        for (var i = 0; i < coordinatesArray.length; i++) {
                            var coordinates = coordinatesArray[i];
                            var xmlAttributeMapping = Dev4U.SP.UI.SpriteViewer.mappings.getXmlAttributeMapping(coordinates.imageContainerId)[spVersion];

                            if (resultString != '') {
                                resultString += ' ';
                            }
                            resultString += xmlAttributeMapping.topAttributeName + '=' + '"' + coordinates.top + '" ';
                            resultString += xmlAttributeMapping.leftAttributeName + '=' + '"' + coordinates.left + '" ';
                            resultString += xmlAttributeMapping.imageAttributeName + '=' + '"' + xmlAttributeMapping.imageUrl + '" ';
                        }
                    }
                    return resultString;
                }

                function setVersionSettings(versionSettingsContainer, imageUrl, left, top, width, height, commandId) {
                    versionSettingsContainer.find('.ms-cui-img-32by32').toggle(imageUrl != null);
                    versionSettingsContainer.find('.ms-cui-img-32by32').height(height).width(width);
                    versionSettingsContainer.find('input[id*="Left"]').val(left);
                    versionSettingsContainer.find('input[id*="Top"]').val(top);
                    versionSettingsContainer.find('.ms-cui-img-32by32 img')
                        .css({ 'left': left, 'top': top })
                        .attr('src', imageUrl);

                    var xmlAttributes = commandId ? toAttributes(getSPVersion(versionSettingsContainer), commandId) : '';
                    versionSettingsContainer.find('.dev4u-sp-version-settings-attributes').val(xmlAttributes);
                }

                function synchronizeVersionSettings(versionSettingsContainers, mapping, width, height) {
                    versionSettingsContainers.each(function (i, e) {
                        var spVersion = getSPVersion($(e));
                        if (mapping && mapping[spVersion]) {
                            var coords = mapping[spVersion];
                            var imageUrl = getImageBySPVersion(getActiveTab(), spVersion).attr('src');
                            setVersionSettings($(e), imageUrl, coords.left, coords.top, width, height, mapping.id);
                        } else {
                            setVersionSettings($(e), null, 0, 0, width, height, null);
                        }
                    });
                }

                function initializeMapAreaGenerator(image, versionSettingsContainer, versionSettingsContainersToSynchronize) {
                    var mapAreaGeneratorOptions = image.data('mapAreaGeneratorOptions');
                    if (mapAreaGeneratorOptions) {
                        image.mapAreaGenerator(mapAreaGeneratorOptions);
                        image.mapster({
                            onClick: function (e) {
                                var area = e.e.target;
                                var imageUrl = image.attr('src');
                                var coords = area.coords.split(',');
                                var left = -1 * parseInt(coords[0]);
                                var top = -1 * parseInt(coords[1]);
                                var width = parseInt(coords[2]) + left;
                                var height = parseInt(coords[3]) + top;
                                var mapping = Dev4U.SP.UI.SpriteViewer.mappings.getByCoords(getImageName(image), getSPVersion(versionSettingsContainer), left, top);

                                setVersionSettings(versionSettingsContainer, imageUrl, left, top, width, height, (mapping != null ? mapping.id : null));
                                synchronizeVersionSettings(versionSettingsContainersToSynchronize, mapping, width, height);
                            },
                            singleSelect: true,
                            stroke: true,
                            strokeColor: 'ff0000',
                            strokeWidth: 1
                        });
                        image.data('mapAreaGeneratorOptions', null);
                    }
                }

                $('.dev4u-sp-version-settings input[name="spVersion"]').each(function (i, e) {
                    var versionSettingsContainer = $(e).parent();
                    var image = getImageBySPVersion(getActiveTab(), getSPVersion(versionSettingsContainer));
                    var versionSettingsContainersToSynchronize = $('.dev4u-sp-version-settings').not(versionSettingsContainer);
                    var checked = $(e).is(':checked');
                    if (checked) {
                        image.parent().show();
                        initializeMapAreaGenerator(image, versionSettingsContainer, versionSettingsContainersToSynchronize);
                    } else {
                        image.parent().hide();
                    }
                    versionSettingsContainer.find('.dev4u-button-find').toggle(checked);
                });
            }

            $('.dev4u-image-tab').each(function () {
                $(this).find('img').each(function (i, e) {
                    $(e).data('mapAreaGeneratorOptions', Dev4U.SP.UI.SpriteViewer.getSettings(getImageName($(e)), spVersionByControlIndex[i]));
                });
            });

            SP.SOD.executeOrDelayUntilScriptLoaded(
                function () {
                    var dialog = SP.UI.ModalDialog.showWaitScreenWithNoClose(SP.Res.genericLoading, null, null, null);

                    $('.dev4u-sp-version-settings input[name="spVersion"]').button().bind('click', function () {
                        initialize();
                    });
                    $('#imageTabs').tabs({
                        activate: initialize,
                        active: 1
                    });
                    $('#imageTabs').show();
                    initialize();

                    $('.dev4u-button-find').on('click', function () {
                        var spVersion = getSPVersion($(this).closest('.dev4u-sp-version-settings'));
                        var left = $('input[id*="Image' + spVersion + 'LeftControl"]').val() * -1;
                        var top = $('input[id*="Image' + spVersion + 'TopControl"]').val() * -1;
                        var image = getImageBySPVersion(getActiveTab(), spVersion);
                        var mapName = image.attr('usemap').substr(1);

                        $('map[name="' + mapName + '"]').find('area[coords^="' + left + ',' + top + ',"]').mapster('select');
                    });

                    dialog.close(SP.UI.DialogResult.OK);
                },
                'SP.UI.Dialog.js');
        })();
    </script>
</asp:Content>